import React, { useEffect, useState } from "react";
import { Carousel, Image, Table, Tag, Space } from "antd";
import { getBanner, getTopList } from "@/api/home";
import bannerStyle from "@/styles/home.module.scss";
export default function Home() {
  const [banners, setBanners] = useState([]);
  const [dataSource, setDataSource] = useState([]);
  useEffect(() => {
    getTopList().then((res) => {
      const data = [];
      console.log(res);
      res.data.list.map((item,index) => {
        const dataSource = {};
        dataSource.key=index
        dataSource.id = item.id;
        dataSource.name = item.name;
        dataSource.playCount = item.playCount;
        dataSource.coverImgUrl = item.coverImgUrl;
        dataSource.tags = item.tags;
        dataSource.description = item.description;
        data.push(dataSource);
        return data;
      });
      setDataSource(data);
    });
    getBanner().then((res) => {
      setBanners(res.data.banners);
    });
  }, []);
  const columns = [
    {
      title: "序号",
      dataIndex: "key",
      render(_) {
        return _ + 1;
      },
    },
    {
      title: "id",
      dataIndex: "id",
    },
    {
      title: "名称",
      dataIndex: "name",
    },
    {
      title: "播放次数",
      dataIndex: "playCount",
    },
    {
      title: "封面",
      dataIndex: "coverImgUrl",
      render(_) {
        return (
          <Image
            src={_}
            style={{ height: "80px", objectFit: "contain" }}
          ></Image>
        );
      },
    },
    {
      title: "标签",
      width: 200,
      dataIndex: "tags",
      render(_) {
        return _.length ? (
          _.map((item, index) => {
            return (
              <Space key={index}>
                <Tag color="green">{item}</Tag>
              </Space>
            );
          })
        ) : (
          <Tag color="volcano">暂无标签</Tag>
        );
      },
    },
    {
      title: "描述",
      dataIndex: "description",
    },
  ];
  return (
    <div style={{ height: "100%" }}>
      <Carousel autoplay className={bannerStyle.center}>
        {banners.map((banner, index) => {
          return (
            <div key={index}>
              <Image preview={false} src={banner.imageUrl}></Image>
            </div>
          );
        })}
      </Carousel>
      <Table rowKey="id" scroll={{
        y:300
      }} dataSource={dataSource}  columns={columns} />;
    </div>
  );
}
